<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>欢迎访问用户中心 -- 用户注册</title>
		<link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet" type="text/css" />
		<script src="${pageContext.request.contextPath}/js/M.js"></script>
		<script src="${pageContext.request.contextPath}/js/form.js"></script>
		<script type="text/javascript">
			function changeValidateCode(obj) {
				//获取当前的时间作为参数，无具体意义    
				var timenow = new Date().getTime();
				//每次请求需要一个不同的参数，否则可能会返回同样的验证码    
				//这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。    
				obj.src = "rand.action?d=" + timenow;
			}
		</script>

	</head>
	<body onload="changeValidateCode(document.getElementById('randImg'));">
		<div class="suc_content">
			<div class="suc_kuang">
				<div class="hei_513">
					<h4 class="h4_suc">注册用户中心账户</h4>
					<p class="suc_p">如果你已拥有账户，可以<a href="${pageContext.request.contextPath}/login" class="cor_yellow">在此登录</a></p>
					<form method="post" action="${pageContext.request.contextPath}/userRegister.action" id="regByEmail">
						<table class="login_ta" style="margin-top: 10px;">
							<tr>
								<td class="td1">用户名：</td>
								<td>
									<input type="text" name="users.userName" id="userNameInp" class="input_kuang val_m item errortip address"
										 autocomplete="off" value="${users.userName}"/>
									<span class="check_tips error_tip" id="userNameCode">用户名格式错误</span>
									<span class="check_tips empty_tip">请输入用户名</span>
									<span class="succ_tips"></span>
								</td>
							</tr>
							<!-- 
							<tr>
								<td class="td1">邮箱：</td>
								<td>
									<input type="text" name="email" id="emailInp" class="input_kuang val_m item errortip address" value=""
										rule="^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$" autocomplete="off" />
									<span class="check_tips error_tip" id="emailCode">邮箱格式错误</span>
									<span class="check_tips empty_tip">请输入邮箱</span>
									<span class="succ_tips"></span>
								</td>
							</tr>
							 -->
							<tr>
								<td class="td1">设置密码：</td>
								<td>
									<div class="td2" id="pwdTd">
										<input type="password" class="input_kuang item val_m errortip password" isRequired="true" id="pwd" name="users.passWord" autocomplete="off" />
										<span class="check_tips empty_tip">请输入新密码</span>
										<span class="check_tips error_tip" id="tips_val"></span>
										<span class="prompt_info" id="pos_email2" style="display: none;">密码输入上限为16个字符</span>
										<span class="succ_tips"></span>
										<span class="tips_1">密码长度为6~16位</span>
										<span class="tips_2">密码不能全为字母</span>
										<span class="tips_3">密码不能全为数字</span>
									</div>
								</td>
							</tr>
							<tr>
								<td class="td1">确认密码：</td>
								<td>
									<input type="password" class="input_kuang val_m item errortip" name="repassword" isRequired="true" repeat="#pwd" autocomplete="off" />
									<span class="check_tips repeat_tip">密码输入不一致</span>
									<span class="check_tips empty_tip">请输入确认密码</span>
									<span class="succ_tips"></span>
								</td>
							</tr>
							<tr>
								<td class="td1">验证码：</td>
								<td>
									<input type="text" class="input_kuang val_m item errortip checkcode" name="inputRand" isRequired="true" autocomplete="off" />
									<img src="${pageContext.request.contextPath}/rand.action" id="randImg" width="95" height="38" onclick="this.src = this.src + '?d=' + new Date().getTime()"  style="cursor: pointer" />
									<span class="checkcode_span">点击图片切换验证码<br />
									<i class="code_error">${msg}</i></span>
								</td>
							</tr>
							<tr class="la_height">
								<td class="td1">&nbsp;</td>
								<td>
									<input type="hidden" name="callback" value="#" />
									<div class="sub_login flt_l">
										<input type="submit" class="no_bg" value="立即注册" />
									</div>
								</td>
							</tr>
						</table>
					</form>
					<!-- email end -->
				</div>
				<div class="suc_botm"></div>
				<!--这部分是卷角效果-->
			</div>
		</div>
		<script>
M.getEl("#regByEmail").addListener("submit", function() {
	M.getEl('#pos_email').hide();
}).validate();
M.getEl("#regByPhone").addListener("submit", function() {
	M.getEl('#ticket_phone').hide();
	M.getEl('#pos_phone').hide();
}).validate();
M.getEls(".Mradio").doApply("click", function() {
	var clickFor = this.attr("clickFor");
	M.getEls(".login_ta").doApply("hide");
	M.getEl(clickFor + " table").show();
});
M.getEl("#tab1").dom.click();
/*
M.getEls(".Mradio").each(function( i, item ){
   var type = this.dom.checked;
   if( type ){
     this.click();
  }
});
 */
M.getEl('#pwd').addListener("focus", function() {
	M.getEl('#pos_email2').show();
	M.getEl('#pos_email').hide();
	setMyClass(M.getEl('#pwdTd'), '');
}).addListener("blur", function() {
	M.getEl('#pos_email2').hide();
	var val = this.val();
	if (!/.{6,16}/.test(val) || val.length == 0 || val.length > 16) {
		setMyClass(this, 'error');
		M.getEl("#tips_val").html(M.getEl(".tips_1").html());
	} else if (/^[A-Za-z]+$/.test(val)) {
		setMyClass(this, 'error');
		M.getEl("#tips_val").html(M.getEl(".tips_2").html());
	} else if (/^\d+$/.test(val)) {
		setMyClass(this, 'error');
		M.getEl("#tips_val").html(M.getEl(".tips_3").html());
	} else {
		setMyClass(this, 'succ');
	}

});
M.getEl('#phone_pwd').addListener("focus", function() {
	M.getEl('#pos_phone2').show();
	M.getEl('#pos_phone').hide();
	setMyClass(M.getEl('#pwdTd2'), '');
}).addListener("blur", function() {
	M.getEl('#pos_phone2').hide();
	var val = this.val();
	if (!/.{6,16}/.test(val) || val.length == 0 || val.length > 16) {
		setMyClass(this, 'error');
		M.getEl("#tips_val_phone").html(M.getEl(".tips_1").html());
	} else if (/^[A-Za-z]+$/.test(val)) {
		setMyClass(this, 'error');
		M.getEl("#tips_val_phone").html(M.getEl(".tips_2").html());
	} else if (/^\d+$/.test(val)) {
		setMyClass(this, 'error');
		M.getEl("#tips_val_phone").html(M.getEl(".tips_3").html());
	} else {
		setMyClass(this, 'succ');
	}

});
function checkBind(type, address, cb) {
	M.Net.ajax.request( {
		url : '/pass/user@id',
		dataType : 'json',
		method : 'GET',
		data : {
			externalId : address,
			type : type
		},
		success : function(xhr, data) {
			cb(data);
		}
	});
}
var tag = {
	PH : 0,
	EM : 0
}
M.getEls(".address").doApply(
				"on",
				"afterValidate",
				function() {
					var me = this;
					var id = this.attr("id");
					var type = id == "emailInp" ? 'EM' : 'PH';
					var stamp = new Date().getTime();
					tag[type] = stamp;
					checkBind(
							type,
							this.val(),
							function(data) {
								if (stamp == tag[type]) {
									if (data.code == 0) {
										if (data.data.userId > 0) {
											if (type == 'PH') {
												var phoneCodeObj = M
														.getEl("#phoneCode");
												phoneCodeObj
														.html("号码已被注册，请更换号码，或<a href='/pass/forgetPassword' class='cor_yellow'>取回密码</a>")
												setMyClass(phoneCodeObj,
														'error');
											} else {
												var emailCode = M
														.getEl("#emailCode");
												emailCode
														.html("邮箱已被注册，请更换邮箱，或<a href='/pass/forgetPassword' class='cor_yellow'>取回密码</a>");
												setMyClass(emailCode, 'error');
											}
										}
									}
								}
							});
				});

M.getEl("#ticket").addListener("focus", function() {
	M.getEl("#ticket_phone").show();
	setMyClass(M.getEl("#ticket"), '');
});
M.getEl("#ticket").addListener("blur", function() {
	M.getEl("#ticket_phone").hide();
	var val_t = this.val();
	if (val_t == "") {
		return false;
	}
	var phone = M.getEl("#phoneNum").val();

	M.Net.ajax.request( {
		url : "/pass/verifyPhoneRegTicket",
		dataType : 'json',
		method : 'GET',
		data : {
			phone : phone,
			ticket : val_t
		},
		success : function(xhr, data) {
			if (data.code > 0) {
				setMyClass(M.getEl("#ticket"), 'error');
				return false;
			} else {
				setMyClass(M.getEl("#ticket"), 'succ');
			}
		}
	});
});

function setMyClass(obj, current, empty, error, repeat, succ) {
	empty = empty || "empty";
	error = error || "error";
	repeat = repeat || "repeat";
	succ = succ || "succ";
	obj.parent().removeClass(empty).removeClass(error).removeClass(repeat)
			.removeClass(succ).addClass(current);
}
</script>
	</body>
</html>